<!--
 * @Author: davon 2230383936@qq.com
 * @Date: 2025-06-14 16:15:46
 * @LastEditors: davon 2230383936@qq.com
 * @LastEditTime: 2025-07-08 20:37:12
 * @FilePath: 
 * @Description: 主页面
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代发订单统计助手</title>
    <!-- 引入Element Plus的样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <style>
        .container {
            max-width: 1600px;
            margin: 0 auto;
            padding: 20px;
            display: flex;
            gap: 20px;
        }
        .main-content {
            flex: 1;
            min-width: 0;
        }
        .help-content {
            width: 450px;
            background: #fff;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
            padding: 20px;
        }
        .help-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 20px;
            color: #303133;
        }
        .help-section {
            margin-bottom: 20px;
        }
        .help-section-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
            color: #606266;
        }
        .help-example {
            background: #f5f7fa;
            padding: 10px;
            border-radius: 4px;
            margin-bottom: 10px;
        }
        .help-example-title {
            font-weight: bold;
            margin-bottom: 5px;
            color: #409EFF;
        }
        .help-example-content {
            color: #606266;
            font-size: 14px;
            line-height: 1.5;
        }
        .input-section {
            margin-bottom: 20px;
        }
        .input-row {
            display: flex;
            gap: 20px;
            align-items: flex-start;
        }
        .input-group {
            flex: 1;
        }
        .table-operations {
            margin-bottom: 20px;
        }
        .summary {
            margin-top: 20px;
            padding: 10px;
            background-color: #f5f7fa;
            border-radius: 4px;
        }
        .summary p {
            margin: 5px 0;
        }
        .invisible-input {
            border: none !important;
            background: transparent !important;
            box-shadow: none !important;
        }
        .invisible-input:hover {
            background: #f5f7fa !important;
        }
        .invisible-input .el-input__wrapper {
            box-shadow: none !important;
            background: transparent !important;
        }
        .invisible-input .el-input__inner {
            border: none !important;
            padding: 0 !important;
            background: transparent !important;
            text-align: center !important;
        }
        .invisible-input .el-input__inner:focus {
            border: none !important;
            box-shadow: none !important;
        }
        .invisible-input .el-input__wrapper.is-focus {
            box-shadow: none !important;
        }
        .el-table .cell {
            padding: 0 !important;
            text-align: center !important;
        }
        .el-table .el-input {
            width: 100%;
        }
        .el-table th {
            text-align: center !important;
        }
        .el-table td {
            text-align: center !important;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <!-- 左侧主要内容 -->
            <div class="main-content">
                <el-card>
                    <!-- 输入区域 -->
                    <div class="input-section">
                        <el-form :model="inputForm" label-width="80px" size="small">
                            <div class="input-row">
                                <el-form-item label="输入信息" class="input-group">
                                    <el-input
                                        v-model="inputForm.text"
                                        placeholder="请输入姓名、电话、地址和产品信息，例如：高永忠，15789796455-5392，云南省 大理白族自治州 鹤庆县 龙开口镇 龙开口镇 ，江东自然村41号  X3"
                                        type="textarea"
                                        :rows="3"
                                        @keyup.enter="addRowFromInput">
                                    </el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="addRowFromInput">添加记录</el-button>
                                </el-form-item>
                            </div>
                        </el-form>
                    </div>

                    <!-- 表格区域 -->
                    <div class="table-operations">
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                            <div class="summary" style="margin: 0; display: flex; gap: 20px;">
                                <p style="margin: 0;">总计金额: <span>{{ grandTotalAmount }}</span></p>
                                <p style="margin: 0;">总计成本: <span>{{ grandTotalCost }}</span></p>
                                <p style="margin: 0;">总利润: <span>{{ totalProfit }}</span></p>
                            </div>
                            <div style="display: flex; gap: 10px;">
                                <el-button type="danger" @click="clearAllData">清空数据</el-button>
                                <el-button type="success" @click="importTable">导入表格</el-button>
                                <el-button type="primary" @click="exportTable">导出表格</el-button>
                            </div>
                            <!-- 隐藏的文件输入框 -->
                            <input ref="fileInput" type="file" accept=".xlsx,.xls" style="display: none;" @change="handleFileImport">
                        </div>
                    </div>
                    <el-table :data="tableData" style="width: 100%;height:40vh;overflow-y: auto;" border>
                        <el-table-column prop="name" label="姓名">
                            <template #default="scope">
                                <el-input v-model="scope.row.name" @blur="calculateRowTotals(scope.row)" size="small" class="invisible-input"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="product" label="产品">
                            <template #default="scope">
                                <el-input v-model="scope.row.product" @blur="calculateRowTotals(scope.row)" size="small" class="invisible-input"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="express" label="快递">
                            <template #default="scope">
                                <el-input v-model="scope.row.express" @blur="calculateRowTotals(scope.row)" size="small" class="invisible-input"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="shippingFee" label="运费">
                            <template #default="scope">
                                <el-input v-model.number="scope.row.shippingFee" @blur="calculateRowTotals(scope.row)" size="small" class="invisible-input"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="amount" label="金额">
                            <template #default="scope">
                                <el-input v-model.number="scope.row.amount" @blur="calculateRowTotals(scope.row)" size="small" class="invisible-input"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="totalAmount" label="总金额">
                            <template #default="scope">
                                <el-input v-model.number="scope.row.totalAmount" @blur="calculateRowTotals(scope.row)" size="small" class="invisible-input"></el-input>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column prop="shippingCost" label="运费成本">
                            <template #default="scope">
                                <el-input v-model.number="scope.row.shippingCost" @blur="calculateRowTotals(scope.row)" size="small" class="invisible-input"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="cost" label="成本">
                            <template #default="scope">
                                <el-input v-model.number="scope.row.cost" @blur="calculateRowTotals(scope.row)" size="small" class="invisible-input"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="totalCost" label="总成本">
                            <template #default="scope">
                                <el-input v-model.number="scope.row.totalCost" @blur="calculateRowTotals(scope.row)" size="small" class="invisible-input"></el-input>
                            </template>
                        </el-table-column> -->
                        <el-table-column prop="remark" label="备注">
                            <template #default="scope">
                                <el-input v-model="scope.row.remark" size="small" class="invisible-input"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="120">
                            <template #default="scope">
                                <el-button type="danger" size="small" @click="deleteRow(scope.$index)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </div>

            <!-- 右侧使用说明 -->
            <div class="help-content">
                <div class="help-title">使用说明</div>
                
                <div class="help-section">
                    <div class="help-section-title">输入格式说明</div>
                    <div class="help-example">
                        <div class="help-example-title">基本格式</div>
                        <div class="help-example-content">
                            姓名，电话地址快递，产品名字+数量
                        </div>
                    </div>
                    <div class="help-example">
                        <div class="help-example-title">示例1：默认一瓶</div>
                        <div class="help-example-content">
                            张三，13800138000广东省广州市天河区天河路1号，1101
                        </div>
                    </div>
                    <div class="help-example">
                        <div class="help-example-title">示例2：指定数量(数量只能用三，不能用3)</div>
                        <div class="help-example-content">
                            李四，13900139000，广东省深圳市南山区科技园，1101 三瓶
                        </div>
                    </div>
                    <div class="help-example">
                        <div class="help-example-title">示例3：存在备注</div>
                        <div class="help-example-content">
                            王五，13700137000，广东省东莞市长安镇，X2二瓶发韵达不要名片
                            王五，13700137000，广东省东莞市长安镇韵达，X2二瓶
                        </div>
                    </div>
                </div>

                <div class="help-section">
                    <div class="help-section-title">快递说明</div>
                    <div class="help-example">
                        <div class="help-example-title">快递规则</div>
                        <div class="help-example-content">
                            1. X系列产品默认使用顺丰快递<br>
                            2. 其他产品默认使用韵达快递<br>
                            3. 可在产品信息后指定快递公司
                        </div>
                    </div>
                    <div class="help-example">
                        <div class="help-example-title">示例：指定快递(快递要在最后一个逗号前面)</div>
                        <div class="help-example-content">
                            王五，13700137000，广东省东莞市长安镇韵达，X2 二瓶
                        </div>
                    </div>
                </div>

                <div class="help-section">
                    <div class="help-section-title">表格操作说明</div>
                    <div class="help-example">
                        <div class="help-example-title">编辑说明</div>
                        <div class="help-example-content">
                            1. 点击单元格可直接编辑内容<br>
                            2. 编辑完成后自动计算金额<br>
                            3. 可随时删除不需要的记录<br>
                            4. 一键导出Excel表格
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入Vue 3和Element Plus -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <script src="https://cdn.jsdelivr.net/npm/exceljs@4.4.0/dist/exceljs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"></script>
    <script src="script.js"></script>
</body>
</html> 